<template>
  <footer class="footer">
    <div class="main-container flex justify-between align-center" style="height: 140px;">
      <div>
        <div>Copyright © 2013-2022 GZGQQ.COM</div>
        <div class="mt-1">
          <el-link :underline="false" class="mr-1" target="_blank" href="http://beian.miit.gov.cn" style="color: #a4aebd">豫ICP备2021020187号-1</el-link>
          <el-link :underline="false" class="menu-item mr-1" style="color: #a4aebd" v-for="(item, index) in pages" :key="'default'+ index" @click="handleOpenPage(item)">
            {{item.title.rendered}}
          </el-link></div>
      </div>
      <div>
        <el-link :underline="false" target="_blank" href="https://gitee.com/aguwang" alt="git仓库"><div class="iconfont icon-gitee-fill-round"></div></el-link>
      </div>
    </div>
  </footer>
</template>

<script>
  import {mapState} from 'vuex'
    export default {
        name: "AppFooter",
      computed: {
        ...mapState(['pages'])
      },
    }
</script>

<style scoped lang="scss">
.footer {
  .iconfont {
    color: #a4aebd;
    font-size: 30px;
    cursor: pointer;
    transition: color .3s;
    &:hover {
      color: #c6e2ff;
    }
  }
}
</style>
